@import "common/_reset.scss";
// @import "common/_header-ByZkx.scss";
@function p($px) {
    @return $px/2*1px;
}

@mixin img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

$bdcolor:#cdccd0;
.mobile {
    height: 100%;
    background-image: url(../img/allbg.png);
    header {
        padding-top: p(21);
        background-color: #fff;
        padding-bottom: p(43);
        .big-img {
            width: p(467);
            padding-top: 76%;
            position: relative;
            overflow: hidden;
            margin: auto;
            img {
                width: 100%;
                @include img;
            }
        }
    }
    section {
        width: 100%;
        /* 详情以及购买模块 */
        .detail-buy {
            padding: p(16) p(43);
            width: 100%;
            background-color: #fff;
            border-top: p(1) solid #727272;
            border-bottom: p(1) solid $bdcolor;
            -webkit-box-shadow: inset hoff voff blur #000;
            -moz-box-shadow: inset hoff voff blur #000;
            box-shadow: 0 p(-10) p(40) p(-5) rgba(66, 68, 66, 0.95);
            /* 详情模块 */
            .detail {
                width: 100%;
                height: p(215);
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                align-content: space-around;
                h2 {
                    width: 100%;
                    color: #5c5c5c;
                    font-size: p(30);
                    line-height: p(30);
                }
                >p {
                    width: p(417);
                    font-size: p(26);
                    color: #5c5c5c;
                    line-height: p(27);
                }
                .collect {
                    width: p(108);
                    height: p(86);
                    color: #5c5c5c;
                    border-left: p(1) solid $bdcolor;
                    padding-left: p(45);
                    align-self: flex-end;
                    display: flex;
                    flex-wrap: wrap;
                    align-items: center;
                    justify-content: center;
                    i {
                        display: block;
                    }
                    p {
                        font-size: p(24);
                    }
                }
            }
            /* 购买模块 */
            .buy {
                position: relative;
                &::after{
                    content: '';
                    display: block;
                    height: p(6);
                    background-color: $bdcolor;
                    width: 106%;
                    position: absolute;
                    bottom: p(-12);
                    left: 50%;
                    -webkit-transform: translateX(-50%);
                    -moz-transform: translateX(-50%);
                    -ms-transform: translateX(-50%);
                    -o-transform: translateX(-50%);
                    transform: translateX(-50%);
                }
                li:first-child {
                    color: #e30202;
                    height: auto;
                    display: flex;
                    justify-content: space-between;
                    align-items: baseline;
                    padding: 0 p(7);
                    h3 {
                        font-size: p(28);
                        span {
                            font-size: p(34);
                        }
                    }
                    p {
                        font-size: p(24);
                        color: #6b6b6b;
                        span {
                            color: #228ac5;
                        }
                    }
                }
                li {
                    height: p(60);
                    margin-bottom: p(8);
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    /*左部*/
                    >div {
                        display: flex;
                        width: p(322);
                        height: p(50);
                        justify-content: space-between;
                        align-items: center;
                        >p:first-child {
                            font-size: p(24);
                            width: p(138);
                            color: #6b6b6b;
                            text-align: center;
                            >span:nth-child(1) {
                                display: block;
                            }
                        }
                        >p:nth-child(2) {
                            display: flex;
                            color: #2e2e2e;
                            >span:nth-child(2n-1) {
                                width: p(51);
                                height: p(50);
                                text-align: center;
                                line-height: p(50);
                                background-color: #b5b5b5;
                                font-size: p(34);
                                border: p(1) solid #6b6b6b;
                            }
                            >span:nth-child(2) {
                                width: p(58);
                                height: p(50);
                                text-align: center;
                                line-height: p(50);
                                font-size: p(34);
                                background-color: #fff;
                                border-top: p(1) solid #6b6b6b;
                                border-bottom: p(1) solid #6b6b6b;
                            }
                        }
                        >select {
                            width: p(160);
                            height: p(50);
                            font-size: p(24);
                            border: p(1) solid #6b6b6b;
                            option{
                                font-size: p(24);
                            }
                        }
                    }
                    /* 按钮 */
                    >button {
                        width: p(145);
                        height: p(60);
                        border-radius: p(10);
                        color: #fff;
                        background-color: #38e859;
                    }
                    &:nth-child(3) {
                        >button {
                            background-color: #f6ac2b;
                        }
                    }
                    &:nth-child(4) {
                        >button {
                            background-color: #f85c5c;
                        }
                    }
                }
            }
        }
        /* 商品详情 */
        .goods-attribute{
            width: 100%;
            background-color: #fff;
            margin-top: p(19);
            >ul{
                display: flex;
                li{
                    height: p(75);
                    border-top: p(1) solid $bdcolor;
                    border-bottom: p(1) solid $bdcolor;
                    border-right: p(1) solid $bdcolor;
                    background-color: #e7e7e7;
                    flex-grow: 1;
                    font-size: p(26);
                    color: #515151;
                    text-align: center;
                    line-height: p(75);
                    &:last-child{
                        border-right: 0;
                    }
                }
                .active{
                    color: #ff4b4b;
                    font-size: p(28);
                    font-family: "黑体";
                    background-color: #fff;
                    border-bottom: 0;
                }
            }
            >.content{
                margin: p(25) p(43) p(35); 
                p{
                    font-size: p(26);
                    color: #5c5c5c;
                    font-family: "黑体";
                }
            }
        }
    }
}